<template>
  <div class="detail-container">
    <!-- 卡片 订单信息 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6"><div class="ddbh">订单编号:&emsp;<span>{{ data.id }}</span></div></el-col>
        <el-col :span="6"><div class="ydbh">运单编号:&emsp;<span>{{ data.transportOrder?.id }}</span></div></el-col>
        <el-col :span="6"><div class="xdsj">下单时间:&emsp;<span>{{ data.createTime }}</span></div></el-col>
        <el-col :span="6">
          <div class="ddzt">订单状态:&emsp;
            <span v-if="data.status===22000">已关闭</span>
            <span v-else-if="data.status===23000">待取件</span>
            <span v-else-if="data.status===23001">已取件</span>
            <span v-else-if="data.status===23002">网点自寄</span>
            <span v-else-if="data.status===23003">网点入库</span>
            <span v-else-if="data.status===23004">待装车</span>
            <span v-else-if="data.status===23005">运输中</span>
            <span v-else-if="data.status===23006">网点出库</span>
            <span v-else-if="data.status===23007">待派送</span>
            <span v-else-if="data.status===23008">派送中</span>
            <span v-else-if="data.status===23009">已签收</span>
            <span v-else-if="data.status===23010">拒收</span>
            <span v-else-if="data.status===23011">已取消</span>
            <span v-else>无</span>
          </div>
        </el-col>
        <el-col :span="6"><div class="yqddsj">预期到达时间:&emsp;<span>{{ data.estimatedArrivalTime }}</span></div></el-col>
      </el-row>
    </el-card>
    <!-- 基本信息 -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="基本信息" name="1">
        <div class="pake1">
          <img src="" alt="">
          <span>发货方</span>
        </div>
        <div class="Shipper">
          <div>
            <div class="demo-input-suffix">发货方姓名: &emsp;<span>{{ data.senderName }}</span></div>
            <div class="demo-input-suffix">发货方地址: &emsp; <span>{{ data.senderProvince?.name+data.senderCity?.name+data.senderCounty?.name }}</span></div>
          </div>
          <div class="suffixphone">
            <div class="demo-input-suffix"> 发货方电话: &emsp;<span>{{ data.senderPhone }}</span></div>
            <div class="demo-input-suffix">详细地址: &emsp; <span>{{ data.senderAddress }}</span></div>
          </div>
        </div>
        <div class="pake1">
          <img class="img-info2" src="" alt="">
          <span>收货方</span>
        </div>
        <div class="Shipper">
          <div>
            <div class="demo-input-suffix">收货方姓名: <span>{{ data.receiverName }}</span></div>
            <div class="demo-input-suffix">收货方地址: <span>{{ data.receiverProvince?.name+data.receiverCity?.name+data.receiverCounty?.name }}</span></div>
          </div>
          <div class="suffixphone">
            <div class="demo-input-suffix"> 收货方电话: <span>{{ data.receiverPhone }}</span></div>
            <div class="demo-input-suffix">详细地址: <span>{{ data.receiverAddress }}</span></div>
          </div>
        </div>
        <div class="pake1">
          <img style="" src="" alt="">
          <span>距离:</span>&emsp;<span>{{ data.distance }}km</span>
        </div>
        <div class="pake-info-remarks">
          <span>备注:</span>&emsp;<span>{{ data.mark }}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 订单轨迹 -->
    <el-collapse v-model="activeNames" class="maps" @change="handleChange">
      <el-collapse-item title="订单轨迹" name="3">
        <baidu-map class="bm-view" center="北京" />
      </el-collapse-item>
    </el-collapse>
    <!-- 取件信息 -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="取件信息" name="4">
        <el-row :gutter="20" class="pickUpInfo">
          <el-col :span="6"><div class="szwd">所在网点:&emsp;<span>{{ data.taskPickup?.agency.name }}</span></div></el-col>
          <el-col :span="6"><div class="qjlx">取件类型:&emsp;
            <span v-if="data.pickupType===1">网点自寄</span>
            <span v-else-if="data.pickupType===2">上门取件</span>
            <span v-else>无</span>
          </div>
          </el-col>
          <el-col :span="6">
            <div class="zyzt">作业状态:&emsp;
              <span v-if="data.taskPickup?.status===1">新任务</span>
              <span v-else-if="data.taskPickup?.status===2">已完成</span>
              <span v-else-if="data.taskPickup?.status===3">已取消</span>
              <span v-else>无</span>
            </div>
          </el-col>
          <el-col :span="6"><div class="qjkdy">取件快递员:&emsp;<span>{{ data.taskPickup?.courier.name }}</span></div></el-col>
          <el-col :span="6"><div class="kdydh">快递员电话:&emsp;<span>{{ data.taskPickup?.courier.mobile }}</span></div></el-col>
          <el-col :span="6"><div class="yjqjsj">预计取件时间:&emsp;<span>{{ data.taskPickup?.estimatedEndTime }}</span></div></el-col>
          <el-col :span="6"><div class="qjwcsj">取件完成时间:&emsp;<span>{{ data.taskPickup?.estimatedStartTime }}</span></div></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <!-- 费用信息 -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="费用信息" name="5">
        <div class="const-content">
          <div class="cost-message">运费: &emsp;<span class="cost">{{ data.amount }}</span><span>元</span></div>
          <div class="cost-message">支付方式: &emsp;
            <span v-if="data.paymentMethod===1">预结</span>
            <span v-else-if="data.paymentMethod===2">到付</span>
            <span v-else>无</span>
          </div>
          <div class="cost-message">付款状态: &emsp;
            <span v-if="data.paymentStatus===1">未付</span>
            <span v-else-if="data.paymentStatus===2">未付</span>
            <span v-else>无</span>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 货品信息 -->
    <el-collapse v-model="activeNames" class="table" @change="handleChange">
      <el-collapse-item title="货品信息" name="6">
        <el-table
          :data="tableData"
          show-summary
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="goodsName"
            label="货品名称"
          >
            <template v-slot>
              <el-input
                v-if="isEdit"
                v-model="orderData.goodsName"
                size="mini"
                placeholder="请输入内容"
                clearable
              />
              <span v-else>{{ tableData[0]?.goodsName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsType"
            label="货品类型"
            :summary-method="disableSummary"
          >
            <template v-slot>
              <el-select
                v-if="isEdit"
                v-model="orderData.goodsType"
                size="mini"
                placeholder="请输入内容"
                clearable
              >
                <el-option v-for="(item) in goodsList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <span v-else>{{ tableData[0]?.goodsType }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalWeight"
            label="重量(千克)"
          >
            <template v-slot>
              <el-input
                v-if="isEdit"
                v-model="orderData.totalWeight"
                size="mini"
                placeholder="请输入内容"
                clearable
              />
              <span v-else>{{ tableData[0]?.totalWeight }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalVolume"
            label="体积(立方)"
          >
            <template v-slot>
              <el-input
                v-if="isEdit"
                v-model="orderData.totalVolume"
                size="mini"
                placeholder="请输入内容"
                clearable
              />
              <span v-else>{{ tableData[0]?.totalVolume }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
          >
            <template v-slot="{row}">
              <template v-if="isEdit">
                <el-button type="text" @click="updataTable(row.id)">确 定</el-button>
                <el-button type="text" size="mini" @click="resetTable">取 消</el-button>
              </template>
              <template v-else>
                <el-button type="text" @click="editFn">编辑</el-button>
                <el-button style="margin-left: 10px;" type="text" @click="delFn(row.id)">删除</el-button>
              </template>
            </template>

          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
import { getDetailApi, delOrderApi, getGoodsTypeApi } from '@/api/business'

export default {

  components: {},
  data() {
    return {
      activeNames: ['1', '3', '4', '5', '6'], // 设置面板默认展开状态为true
      isEdit: false, // 编辑
      data: {},
      tableData: [],
      delId: '',
      name: '',
      orderData: {},
      goodsList: [],
      goodsData: {}
    }
  },

  computed: {},

  created() {
    this.getData()
  },

  methods: {
    // 实现订单详情请求
    async getData() {
      this.data = await getDetailApi(this.$route.params.id)
      // console.log(this.$route.params.id)
      console.log(this.data)
      // 获取货品信息中表格数据
      this.goodsData = {
        id: this.data.id,
        goodsName: this.data.orderCargoDTOS[0].name,
        goodsType: this.data.orderCargoDTOS[0].goodsType.name,
        totalWeight: this.data.orderCargoDTOS[0].totalWeight,
        totalVolume: this.data.orderCargoDTOS[0].totalVolume
      }
      // 添加到表格数组中
      this.tableData.push(this.goodsData)
      console.log(this.tableData)
      this.orderData = this.goodsData
    },
    // 编辑
    async editFn() {
      this.isEdit = true
      const res = await getGoodsTypeApi()
      console.log(res)
      this.goodsList = res
    },
    // 删除数据
    async delFn(id) {
      console.log(id)
      this.delId = id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 发送删除请求
        await delOrderApi({
          orderId: id
        })
        // 给出删除成功提示
        this.$message.success('删除数据成功')
        // 判断当前页面的数据条数和页数
        if (this.tableData.length === 1 && this.pageData.page > 1) {
          this.pageData.page--
        }
        // 重新获取最新的数据
        this.getData()
      }).catch()
    },
    // 表格中禁止求和操作
    disableSummary() {
      return ''
    },
    // 关闭编辑
    resetTable() {
      this.isEdit = false
      this.orderData = this.goodsData
    },
    // 保存编辑
    async updataTable(id) {
      await delOrderApi({
        orderId: id
      })
      this.$message.error('初始化数据不允许修改')
      this.isEdit = false
    },
    // 设置面板默认展开状态
    handleChange(activeNames) {
      // 折叠项变化时触发的事件处理程序
      console.log('当前展开的折叠项: ', activeNames)
    }
  }
}

</script>
<style  scoped lang="scss">
.detail-container {
    padding: 20px;
    background-color: #f3f4f7;
    padding-top: 23px;
    ::v-deep .el-card__body {
    padding: 25px 44px;
    padding-right: 0;
    font-size: 14px;
    span{
      color: #818693;
    }
    .ddbh{
      span{
        margin-left: 27px;
      }
    }
    .yqddsj{
      margin-top: 25px;
    }
  }
 ::v-deep .el-collapse {
    border: none;
    margin-top: 20px;
    border-radius: 4px;
    .el-collapse-item__header {
      display: flex;
      align-items: center;
      height: 60px;
      line-height: 60px;
      background: #f8faff!important;
      border-radius: 4px 4px 0 0;
      border-bottom: 0;
      font-size: 16px;
      font-weight: 700;
      padding: 0 44px;
    }
    .el-collapse-item__content {
      padding: 24px 44px;
    }
    // 基本信息
    .pake1{
      margin-top: 15px;
      img{
        width: 14px;
        height: 18px;
        vertical-align: middle;
        margin-left: 2px;
        margin-right: 10px;
      }
      .img-info2{
        width: 17px;
        height: 17px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
      span{
        font-size: 16px;
        line-height: 28px;
      }
    }
    .Shipper{
      margin-top: 0;
      margin-left: 40px;
      display: flex;
      justify-content: flex-start;
      .suffixphone{
        margin-left: 174px;
      }
    }
    .pake-info-remarks{
      margin-top: 20px;
      margin-left: 31px;
      span{
         font-size: 16px;
      }
    }
    .demo-input-suffix {
      font-size: 14px;
      font-weight: 400;
      margin-top: 10px;
      span{
        color: #818693;
      }
    }
  }
  // 地图
  .bm-view {
  width: 100%;
  height: 570px;
}
::v-deep .el-collapse.maps .el-collapse-item__content {
    padding: 30px!important;
}
// 取件信息
.pickUpInfo{
  font-size: 14px;
  span{
    color: #818693;
  }
  .kdydh,.yjqjsj,.qjwcsj{
    margin-top: 20px;
  }
}
// 费用信息
.const-content{
  display: flex;
  .cost-message{
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #20232a;
    span{
      color: #818693;
    }
    .cost{
      font-size: 18px;
      color: #ffb302;
      margin-right: 10px;
    }
  }
}
// 货品信息
::v-deep .el-collapse.table .el-collapse-item__content {
    padding: 24px 28px;
    .el-table{
      border: 1px solid #ebeef5
    }
 }
}
</style>
